<template>
  <!-- 油品发票 -->
  <div class="home-page-container">
    <div class="oil-invoice-wrapper">
      <el-row :gutter="20">
        <!-- 油品发票金额 -->
        <el-col :span="6">
          <div class="invoice-balance">
            <div class="title">油品发票金额</div>
            <div class="balance">
              <span class="flag">¥</span>
              <span>{{invoiceBalacne || '0.00'}}</span>
            </div>
          </div>
        </el-col>
        <!-- 发票抬头信息 -->
        <el-col :span="18">
          <div class="invoice-info">
            <div class="title">发票抬头信息</div>
              <el-row>
                <el-col :span="9">
                  <div class="info-item">
                    <span class="label">开票抬头：</span>
                    <span class="info">{{invoiceInfo.companyName}}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">纳税人识别号：</span>
                    <span class="info">{{invoiceInfo.taxpayerCode}}</span>
                  </div>
                </el-col>
                <el-col :span="15">
                  <div class="info-item">
                    <span class="label">开户行和账号：</span>
                    <span class="info">{{invoiceInfo.bankName}}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">联系电话和地址：</span>
                    <span class="info">{{invoiceInfo.addressPhone}}</span>
                  </div>
                </el-col>
              </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-card shadow="never" style="margin: 20px 0">
       <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(initQuery)"
        @changeTime="(value,model)=>changeTime(value,'searchBar', 'start', 'end')"
        :loading="tableLoading"
        :isLayout="true">
        <template slot="handler">
          <el-button size="mini" @click="download" icon="el-icon-download">导出</el-button>
        </template>
      </mer-search>
    </el-card>
    <el-card shadow="never">
      <!-- table 表格 -->
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange">
        <template slot="handler" slot-scope="{row}">
          <el-button-group>
            <el-button size="mini" @click="showDetail(row)">账单明细</el-button>
          </el-button-group>
        </template>
      </mer-table>
    </el-card>
    <invoice-detail v-if="invoiceDetailParams" :data="invoiceDetailParams" @close="invoiceDetailParams=''"></invoice-detail>
  </div>
</template>
<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import { getOilInvoiceInfoApi, getOilInvoiceBalacneApi, getOilInvoiceListApi, downloadOilInvoiceBillApi} from '@/api/finance'
import InvoiceDetail from './components/oilsInvoice/detail'
import moment from 'moment'

// 查询表单配置
let formConfig = [
  { label: '油站', type: 'select', modelName: 'gasId', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'gasName', selectValue: 'gasId' },
  { label: '月份', type: 'date', modelName: 'invoiceTime', model: '', dateType: 'monthrange', format: 'yyyy-MM', pickerOptions:{}, clearable:false},
]
// 表格参数配置
let tableConfig = [
  { label: '月份', prop: 'billMonth', width: 150 },
  { label: '油站', prop: 'gasName', width: 180  },
  { label: '油品型号', prop: 'oilNoName', width: 180  },
  { label: '账单金额(元)', prop: 'invoiceAmount', width: 110 },
  { label: '操作', slot: 'handler', fixed: 'right', width: 150 }
]
export default {
  name: 'invoice_oilsInvoice',
  mixins:[ listPage, queryMix ],
  components:{
    InvoiceDetail
  },
  data(){
    return{
      invoiceTime:'',
      formConfig: formConfig,
      tableConfig: tableConfig,
      invoiceInfo:{
        companyName: '',
        bankName: '',
        taxpayerCode: '',
        addressPhone:''
      },
      allQueryProps:{},
      invoiceBalacne: '0.00',
      invoiceDetailParams:'',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = ''
          }
        },
        // 限制时间选择范围366天
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 365 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
   created(){
    this.initPage()
    this.initInvoiceInfo() //解决二次刷新，数据丢失
  },
  activated(){
    this.initInvoiceInfo()
  },
  methods:{
    initPage () {
      this.getQueryProps()
      this.initQuery()
      this.initList(getOilInvoiceListApi,false)
    },
    // 设置默认查询条件，默认时间间隔3个月
    initQuery () {
      this.invoiceTime = ''
      this.initMonth()
      const {invoiceTime,pickerOptions} = this
      const initObj = { invoiceTime:[invoiceTime,pickerOptions] }
      this.setSearchConfig(initObj)
    },
    initMonth(){
      let start = moment().month(moment().month() - 3).startOf('month').format('YYYY-MM-DD HH:mm:ss')
      const end = moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      const start_year = moment(start).year()
      const end_year = moment(end).year()
      // 不允许初始值跨年，如果年份不同，将开始时间设置为1月
      if(start_year !== end_year){
        start = moment().month(0).startOf('month').format('YYYY-MM-DD HH:mm:ss')
      }
      this.invoiceTime = [start,end]
      this.searchBar['start'] = moment(start).format('YYYY-MM')
      this.searchBar['end'] = moment(end).format('YYYY-MM')
    },
    getQueryProps(){
      // 获取查询条件：油站
      this.getAllGasStations()
    },
    initInvoiceInfo(){
      this.getInvoiceBlance()
      this.getInvoiceInfo()
    },
    // 获取可开发票金额（3月）
    async getInvoiceBlance(){
      try{
        const start = moment().month(moment().month() - 3).startOf('month').format('YYYY-MM-DD HH:mm:ss')
        const end = moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD HH:mm:ss')
        const data = { start, end}
        const { code,result = {} } = await getOilInvoiceBalacneApi(data)
        if(code !== 200) return
        this.invoiceBalacne = result
      }catch(err){
        console.log(err)
      }
    },
    // 获取油品发票信息
    async getInvoiceInfo () {
      try{
        const { code,result = {} } = await getOilInvoiceInfoApi()
        if(code !== 200) return
        this.invoiceInfo = result || {}
      }catch(err){
        console.log(err)
      }
    },
    //导出
    download () {
      this.downloadFile(downloadOilInvoiceBillApi,'预存款')
    },
    // 发票账单明细
    showDetail(row){
      const { gasId, billMonth } = row
      this.invoiceDetailParams = { gasId, billMonth }
    }
  }
}
</script>
<style lang="less" scoped>
.home-page-container{
  margin-top: 20px;
}
.oil-invoice-wrapper{
  margin-bottom: 20px;
  box-sizing: border-box;
  .invoice-balance{
    background: #FFF;
    height: 138px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 14px;
      color: #A6A6A6;
      margin-bottom: 17px;
    }
    .balance{
      font-size: 20px;
      color: #222222;
      .flag{
        padding-right: 5px;
        font-size: 10px;
      }
    }
  }
  .invoice-info{
    background: #FFF;
    height: 138px;
    padding: 24px 28px;
    font-size: 12px;
    .title{
      border-left: 3px solid #4B7EFE;
      padding-left: 5px;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 25px;
    }
    .info-item{
      margin-bottom: 15px;
      display: flex;
      .label{
        color: #A6A6A6;
        white-space: nowrap;
      }
      .info{
        color: #222222;
        word-break: break-all;
      }
    }
  }
}

</style>